<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./api/main.js"></script>
  <style>
    *{
      padding:0;
      margin: 0;
    }
    html,body{height: 100%;}
    input{
      margin-top: 20px;
      width: 800px;
      line-height: 6vh;
      font-size: 3vh;
    }
    .nav{
      text-align: center;
    }
    button{
      font-size: 2vh;
      margin-top: 10px;
    }
    .animation{
      height: 50vh;
      width: 800px;
      margin: 0 auto;
      background-color: rgb(119, 115, 232);
      display: flex;
      margin-top: 10px;
      align-items: flex-end;
      justify-content: space-around;
    }
    .element{
      background-color: aquamarine;
      width: 60px;
      text-align: center;
    }
    .function button{
      padding: 0;
      font-size: 16px;
    }
    .function{
      width: 800px;
      margin: 0 auto;
      display: flex;
      margin-top: 10px;
      justify-content: space-around;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div class="nav">
    <input type="text" placeholder="请输入类似于1 2 3 4这样的数字....">
    <br><button onclick="main()">生成数组</button>
  </div>
  <div class="value">
    <div class="animation">
    </div>
  </div>
  <div class="function">
    <button>快速排序</button>
    <button>冒泡排序</button>
    <button>插入排序</button>
    <button>选择排序</button>
  </div>
  <div>
    <br><br><br>
    注意事项: 数字最多10个, 最大为30, 不可以输入负数, 不然创死你
  </div>
</body>
</html>